@import './common';

.tags-wrap{
	box-sizing:border-box;
	padding: setSize(40) setSize(36) setSize(30);

	.title{
		font-size: setSize(30);
		font-weight: 500;
	}

	.tags{

		.tag{
			line-height:setSize(48);
			box-sizing:border-box;
			padding:0 setSize(30);
			margin-top: setSize(24);
			margin-right: setSize(32);
			border-radius:setSize(4);
			border:setSize(2) solid #CECECE;
			font-size:setSize(26);
			font-weight:400;
			color:#CECECE;
			@include ellipsis;
		}

		.tag-active{
			color: #332F36;
			background-color: $mainColor;
			border:setSize(2) solid $mainColor;
		}
	}
}

.time-wrap{
	padding-bottom: setSize(60);

	.tags{

		.tag{
			line-height: setSize(70);
			text-align: center;
			margin-right:0;
		}
	}
}

.screen-form{
	position: absolute;
	bottom: setSize(160);
	width: 100%;
	z-index: 1000;
	background-color:#2d2d2d;

	.icon-box{
		width: setSize(30);
		height: setSize(30);
		box-sizing:border-box;
		padding:setSize(4);
		border:setSize(2) solid $mainColor;

		.icon{
			display: block;
			width: 100%;
			height: 100%;
		}
	}

	.text{
		box-sizing:border-box;
		padding:setSize(10) setSize(20);
		line-height:setSize(37);
		font-size:setSize(26);
		font-weight:400;
		color:rgba(133,134,136,1);
	}
}

.addr-wrap{
	height: 100%;
	padding:0;
	// border-top:setSize(2) solid #F5F6F8;
	// border-bottom:setSize(12) solid #F5F6F8;
	overflow: hidden;
	font-size: setSize(26);
	font-weight: bold;
	color: #999;
}

.addr-box{
	width: 50%; 
	// border-right:setSize(16) solid #F5F6F8;

	&:nth-child(2){
		background-color:#262626;
	}

	.addr{
		// width: 100%; 
		// box-sizing:border-box;
		// padding:setSize(26);
		// text-align: center;
		// @include ellipsis;

		.text{
			width: 100%; 
			box-sizing:border-box;
			padding:setSize(26) setSize(12);
			text-align: center;
			@include ellipsis;
		}
	}

	.addr-active{
		color: $mainColor;
	}
}

.gym-box{
	width: setSize(600 - 180 - 16);
	background-color:#2D2D2D;
	color: $textColor;
	// @include ellipsis;

	.gym{
		box-sizing:border-box;
		padding:setSize(10) setSize(20);
		margin:setSize(20);
		text-align: center;
		border-radius:setSize(4);
		// @include ellipsis;
	}

	.gym-active{
		color: #333333;
		background-color:$mainColor;
	}
}